<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>地铁案例</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./data/data.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn-list">
      <div onclick="addMarker()" class="btn">创建地铁点图层</div>
      <div onclick="addPolyline()" class="btn">创建地铁线图层</div>
      <div onclick="addPolygon()" class="btn">创建街道分层设色</div>
      <div onclick="clearLayer()" class="btn">清除图层</div>
    </div>

    <script type="text/javascript">
      /**
       * 创建文字点位
       */
      const addMarker = () => {
        const markerList = []
        metroPoint.forEach(item => {
          const o = {
            id: 'marker_' + item.name,
            coordinate: item.coordinate, //坐标位置
            coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
            anchors: [-108 / 6, 142 / 3], //锚点
            range: [0, 100000], //可视范围
            imagePath: '@path:二三维标签添加/img/metro.png', //显示图片路径
            imageSize: [108 / 3, 142 / 3],
            text: item.name,
            fontSize: 10, //字体大小
            userData: JSON.stringify(item.coordinate),
            autoHeight: true, // 自动判断下方是否有物体
            displayMode: 2 // 智能显示模式  开发过程中请根据业务需求判断使用四种显示模式
          }
          // 往数组中添加 marker 对象
          markerList.push(o)
        })

        // 添加dts marker
        fdapi.marker.add(markerList)
      }

      const addPolyline = () => {
        const polylineList = []

        metroPolyline.forEach(item => {
          let p = {
            id: 'p1_' + item.name, //折线唯一标识id
            coordinates: item.coordinates, //构成折线的坐标点数组
            coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
            range: [1, 10000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
            color: item.color, //折线颜色
            thickness: 20, //折线宽度
            intensity: 2, //亮度
            flowRate: 1, //流速
            shape: 0, //折线类型 0：直线， 1：曲线
            depthTest: true, //是否做深度检测 开启后会被地形高度遮挡
            style: 4, //折线样式 参考样式枚举：PolylineStyle
            tiling: 0 //材质贴图平铺比例
          }
          polylineList.push(p)

          let p2 = {
            id: 'p2_' + item.name, //折线唯一标识id
            coordinates: item.coordinates.map(c => [c[0], c[1], c[2] + 0.1]), //构成折线的坐标点数组
            coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
            range: [1, 10000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
            color: item.color, //折线颜色
            thickness: 20, //折线宽度
            intensity: 300, //亮度
            flowRate: 0.4, //流速
            shape: 0, //折线类型 0：直线， 1：曲线
            depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
            style: 3, //折线样式 参考样式枚举：PolylineStyle
            tiling: 0.5 //材质贴图平铺比例
          }
          polylineList.push(p2)
        })

        // 添加dts marker
        fdapi.polyline.add(polylineList)
      }

      const addPolygon = () => {
        const colorStops = [
          [100, [131 / 255, 230 / 255, 255 / 255, 0.5], '#83e6ff'],
          [200, [154 / 255, 245 / 255, 146 / 255, 0.5], '#9af592'],
          [400, [252 / 255, 225 / 255, 72 / 255, 0.5], '#fce148'],
          [600, [250 / 255, 170 / 255, 66 / 255, 0.5], '#faaa42'],
          [1000, [255 / 255, 113 / 255, 47 / 255, 0.5], '#ff712f'],
          [3000, [250 / 255, 49 / 255, 49 / 255, 0.5], '#fa3131'],
          [5000, [184 / 255, 14 / 255, 14 / 255, 0.5], '#b80e0e']
        ]

        const polygonList = []
        const markerList = []
        streetPolygon.forEach((item, index) => {
          let p = {
            id: 'polygon' + index,
            coordinates: item.coordinates,
            coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
            range: [1, 10000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
            color: colorStops.find(stopItem => item.num < stopItem[0])[1], //多边形的填充颜色
            frameThickness: 0, //边框厚度
            intensity: 1, //亮度
            style: 10, //单色 请参照API开发文档选取枚举
            depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
            priority: 1 //显示优先级 值越大显示越靠上
          }

          polygonList.push(p)

          let o1 = {
            id: 'marker_street_' + index,
            coordinate: item.center, //坐标位置
            coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
            anchors: [0, 0], //锚点，设置Marker的整体偏移，取值规则和imageSize设置的宽高有关，图片的左上角会对准标注点的坐标位置。示例设置规则：x=-imageSize.width/2，y=imageSize.height
            range: [0, 500000], //可视范围

            text: item.name, //显示的文字
            useTextAnimation: true, //关闭文字展开动画效果 打开会影响效率
            textRange: [1, 1000], //文本可视范围[近裁距离, 远裁距离]
            textOffset: [0, 0], // 文本偏移
            textBackgroundColor: [1, 1, 1, 0], //文本背景颜色
            fontSize: 10, //字体大小
            fontOutlineSize: 2, //字体轮廓线大小
            fontColor: Color.White, //字体颜色
            fontOutlineColor: Color.Black //字体轮廓线颜色
          }

          markerList.push(o1)
        })

        // 添加dts polygon
        fdapi.polygon.add(polygonList)
        // 添加dts marker
        fdapi.marker.add(markerList)
      }

      const addODLine = (id, coordinate) => {
        fdapi.odline.clear()
        let OdList = []
        let colors = [
          [0, 0.2, 1, 1],
          [0.7, 0.2, 0.1, 1]
        ]
        metroPoint.forEach((item, index) => {
          console.log(item)
          if (id.includes(item.name)) return

          const coordinates = [coordinate, item.coordinate]
          // 根据不同序号给予不同的属性值，这里模拟了两种样式
          let color = index % 2 ? colors[0] : colors[1]
          let lineThickness = index % 2 ? 8 : 10
          // 实体线
          let ood = {
            id: 'od_' + index, //ODLine唯一标识
            color: color, //填充颜色
            coordinates: coordinates, //构成ODLine的坐标点数组
            flowRate: 0.5, //流速
            intensity: 20, //亮度
            bendDegree: 0.8, //弯曲度
            tiling: 0.8, //材质贴图平铺比例
            lineThickness: lineThickness * 0.8, //折线宽度
            labelSizeScale: 1000, //两端点的缩放值
            lineShape: 1, //ODLine模型样式 0:平面 1:柱体，默认值1
            lineStyle: 0, //ODLine材质样式 0:纯色 1:箭头，2:流动点，默认值0
            flowShape: 0, //ODLine发光点样式 0:无 1:球体，默认值0
            startPointShape: 0, //点的样式
            endPointShape: 0, //点的样式
            startLabelShape: 0, //点的样式
            endLabelShape: 0 //点的样式
          }
          // 流动线
          let ood2 = {
            id: 'od2_' + index, //ODLine唯一标识
            color: color, //填充颜色
            coordinates: coordinates, //构成ODLine的坐标点数组
            flowRate: 0.5, //流速
            intensity: 500, //亮度
            bendDegree: 0.8, //弯曲度
            tiling: 1, //材质贴图平铺比例
            lineThickness: lineThickness, //折线宽度
            labelSizeScale: 1000, //两端点的缩放值
            lineShape: 1, //ODLine模型样式 0:平面 1:柱体，默认值1
            lineStyle: 2, //ODLine材质样式 0:纯色 1:箭头，2:流动点，默认值0
            flowShape: 0, //ODLine发光点样式 0:无 1:球体，默认值0
            startPointShape: 0, //点的样式
            endPointShape: 1, //点的样式
            startLabelShape: 0, //点的样式
            endLabelShape: 1 //点的样式
          }
          // 添加至OD数组中
          OdList.push(ood)
          OdList.push(ood2)
        })

        console.log(OdList)
        // 添加od
        fdapi.odline.add(OdList)
      }

      const clearLayer = () => {
        fdapi.marker.clear()
        fdapi.polyline.clear()
        fdapi.polygon.clear()
        fdapi.odline.clear()
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {
              fdapi.reset(2 | 4)
              fdapi.camera.set(9236.862188, 4742.352617, 2116.566875, -53.034138, -152.589691, 0)
            },
            onEvent: e => {
              if (e.eventtype === 'LeftMouseButtonClick') {
                if (e.Id.includes('marker')) {
                  addODLine(e.Id, JSON.parse(e.UserData))
                }
              }
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
